<template>
  <view class="page user">
    <view class="wone" v-for="(item,index) in info.list" :key="index" @click.stop="getDetail(item)">
      <view class="dan">
        <text class="dannum">单号：{{ item.code }}</text>
        <text class="fzhi" @click.stop="copytxt(item.code||'')">复制</text>
        <text class="sname" :style="`color: ${zifu(item.applyStatus).color}`">{{ zifu(item.applyStatus).title }}</text>
      </view>
      <view class="dantwo">
        <text class="daname">{{ item.deviceName }}</text>
        <text class="shu">×{{ item.qty }}</text>
        <view class="qxbtn" v-if="parseInt(item.applyStatus,10)<5" @click.stop="cancel(item)">取消</view>
      </view>
      <text class="zname">支持功能：{{ Support(item.deviceCompoment) }}</text>
    </view>
    <wd-message-box/>
    <view class="empty" v-if="info.list.length == 0">
      <wd-status-tip image="content" tip="暂无租赁申请"/>
    </view>
    <view class="add_btn flex items-center justify-center" @click="addFun">
      <wd-icon name="add" size="22px"></wd-icon>
    </view>
  </view>
</template>

<script setup>
import {ref, reactive} from 'vue';
import {useMessage} from '@/uni_modules/wot-design-uni'
import userApiService from '../../api/user';

import dayjs from 'dayjs'

const message = useMessage()
const value = ref('')
var modelValue = ref(true)
const active = ref(0)
let info = reactive({
  list: [],
  dict: []
})

function nextStep() {
  active.value = active.value + 1
}

init()

function init() {

  userApiService.slist().then(res => {
    console.log(res)
    let today = dayjs()
    info.list = res.applyList
    info.list.forEach(item => {
      item.applyStatus = ((today.diff(dayjs(item.createTime), 'day') > 2) ? "8" : item.applyStatus)
    })
    console.log(info.list)
    info.dict = res.dict
  })
}


function addFun() {
  uni.navigateTo({
    url: "/pages/mine/ApplyShebei"
  })
}

function zifu(e) {
  let dict = info.dict
  let parms = {}
  for (let i in dict) {
    if (dict[i].value == e) {
      parms = dict[i]
    }
  }
  return parms;
}

function copytxt(content) {
  // 复制内容，必须字符串，数字需要转换为字符串
  content = typeof content === 'string' ? content : content.toString();
  //#ifndef H5
  uni.setClipboardData({
    data: content,
    success: function () {
      uni.showToast({
        title: '复制成功',
        icon: 'none',
        duration: 1000
      });
    },
    fail: function () {
      uni.showToast({
        title: '复制失败',
        icon: 'none',
        duration: 1000
      });
    },
  });
  //#endif
  // #ifdef H5
  if (!document.queryCommandSupported('copy')) {
    //为了兼容有些浏览器 queryCommandSupported 的判断
    msg('浏览器不支持');
  }
  let textarea = document.createElement('textarea');
  textarea.value = content;
  textarea.readOnly = 'readOnly';
  document.body.appendChild(textarea);
  textarea.select(); // 选择对象
  textarea.setSelectionRange(0, content.length); //核心
  let result = document.execCommand('copy'); // 执行浏览器复制命令
  if (result) {
    uni.showToast({
      title: '复制成功',
      icon: 'none',
      duration: 1000
    });
  } else {
    uni.showToast({
      title: '复制失败',
      icon: 'none',
      duration: 1000
    });
  }
  textarea.remove();
  // #endif
}

function Support(e) {
  let shuzu = [
    {name: '生物微电', id: 'swwd'},
    {name: '点阵波', id: 'dzb'},
    {name: '智能热疗', id: 'sprz'},
    {name: '纳米超导', id: 'nmcd'},
  ]
  let data = []
  if (e) {
    let arr = e.split(",");
    for (let i in arr) {
      for (let j in shuzu) {
        if (arr[i] == shuzu[j].id) {
          data.push(shuzu[j].name)
        }
      }
    }
  }
  return data.toString();
}

function cancel(item) {
  message.confirm({
        msg: '确定取消么',
        title: '取消'
      })
      .then(() => {
        userApiService.userChancle({
          id: item.id
        }).then(res => {
          console.log(res)
          init()
        })
      })
      .catch(() => {
        console.log('点击了取消按钮')
      })

}

function getDetail(item) {
  if (item.applyStatus === "1") {
    let total = 23000 * item.qty
    uni.navigateTo({
      url: `/pages/mine/ApplyShechaun?newcode=` + item.id + '&total=' + total
    })
  } else {
    uni.navigateTo({
      url: "/pages/mine/ApplyWuliu?id=" + item.id
    })
  }

}
</script>
<style lang="scss" scoped>
.add_btn {
  position: fixed;
  bottom: 120rpx;
  right: 40rpx;
  height: 100rpx;
  width: 100rpx;
  border-radius: 50%;
  box-shadow: 0 0 12px 0 rgba(#1b1b1b, .2);
  color: #fff;
  background-color: #3775E9;
}

.user {
  background: #F7F8FC !important;
  height: 100vh;

  .wone {
    margin: 20rpx;
    background-color: #fff;
    border-radius: 16rpx;
    padding: 25rpx 20rpx;

    .dan {
      display: flex;
      flex-direction: row;
      align-items: center;

      .dannum {
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 28rpx;
        color: #666666;
      }

      .fzhi {
        margin-left: 20rpx;
        width: 71rpx;
        height: 43rpx;
        background: #F2F2F2;
        border-radius: 22rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 500;
        font-size: 24rpx;
        color: #222222;
      }

      .sname {
        margin-left: auto;
        color: #333;
        font-size: 28rpx;
        font-weight: 500;
      }
    }

    .dantwo {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-top: 30rpx;

      .daname {
        font-weight: bold;
        font-size: 32rpx;
        color: #333333;

      }

      .shu {
        font-weight: bold;
        font-size: 28rpx;
        color: #333333;
        display: inline-block;
        margin-left: 20rpx;
      }

      .qxbtn {
        margin-left: auto;
        padding: 8rpx 30rpx;
        background: #4d80f0;
        border-radius: 10rpx;
        font-weight: 500;
        font-size: 24rpx;
        color: #FFFFFF;
      }
    }

    .zname {
      font-weight: 400;
      display: block;
      margin-top: 30rpx;
      font-size: 28rpx;
      color: #999999;
    }

    .shenname {
      font-weight: bold;
      font-size: 32rpx;
      color: #222222;
      display: block;
      margin-bottom: 20rpx;
    }

    .faview {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-bottom: 15rpx;

      .fname {
        font-weight: 400;
        font-size: 28rpx;
        color: #333333;
      }

      .fval {
        font-weight: 400;
        font-size: 28rpx;
        color: #666666;
      }

      .yulan {
        font-weight: 500;
        font-size: 28rpx;
        color: #597FE8;
        display: inline-block;
        margin-left: 20rpx;
      }
    }

    .faview:last-child {
      margin-bottom: 0;
    }
  }
}

.dinnav {
  display: flex;
  flex-direction: column;
  margin-top: 40rpx;
  background-color: #fff;
  padding: 0rpx 30rpx;

  .wuitem {
    min-height: 200rpx;
    border-left: 2rpx solid #E2E3E8;
    padding-left: 50rpx;
    position: relative;
    padding-bottom: 20rpx;

    .leftyuan {
      width: 12rpx;
      height: 12rpx;
      background: #DADADA;
      border-radius: 50%;
      position: absolute;
      left: -6rpx;
      top: -6rpx;

    }

    .leftimg {
      width: 46rpx;
      height: 46rpx;
      position: absolute;
      left: -23rpx;
      top: -23rpx;

      .transportimg {
        width: 100%;
        height: 100%;
      }
    }

    .itemcont {
      display: flex;
      width: 100%;
      height: 100%;
      flex-direction: column;

      .mt {
        display: inline-block;
        margin: 5rpx 0;
      }

      .name {
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #222222;
        margin-top: -10rpx;
      }

      .dizhi {
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #222222;
      }

      .val {
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #7D7D7D;
      }
    }
  }

  .wuitem:last-child {
    border-left: none;
  }

}

.empty {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}


</style>
